@page("Course List"){
 @loginheader("My Course List")  

<div class="container">
   <div class="hero-unit">   
<table class="table table-hover actual">
 <caption>My Course List</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>Title</th>
      <th>Lecturer</th>
      <th>Institution</th>
      <th>Web Site</th>
      <th>Score</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
<!--     <tr> -->
<!--       <td>1</td> -->
<!--       <td>Irrationality for Beginners</td> -->
<!--       <td>Dan Ariely</td> -->
<!--       <td>Duke University</td> -->
<!--       <td><a href="https://class.coursera.org/behavioralecon-001/class/index">Coursera</a></td> -->
<!--       <td>Not Voted Yet</td> -->
<!--       <td> -->
<!--       <a href="#" data-toggle="tooltip" title="" data-original-title="Delete Course From List"><button type="button" class="close" >&times;</button></a> -->
<!--       </td> -->
<!--     </tr> -->
  </tbody>
</table>

<table class="table table-hover recommended">
 <caption>Recommended Course List</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>Title</th>
      <th>Lecturer</th>
      <th>Institution</th>
      <th>Web Site</th>
      <th>Score</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
<!--     <tr> -->
<!--       <td>1</td> -->
<!--       <td>Irrationality for Beginners</td> -->
<!--       <td>Dan Ariely</td> -->
<!--       <td>Duke University</td> -->
<!--       <td><a href="https://class.coursera.org/behavioralecon-001/class/index">Coursera</a></td> -->
<!--       <td>Not Voted Yet</td> -->
<!--       <td> -->
<!--       <a href="#" data-toggle="tooltip" title="" data-original-title="Delete Course From List"><button type="button" class="close" >&times;</button></a> -->
<!--       </td> -->
<!--     </tr> -->
  </tbody>
</table>

</div>
</div>

<div id="dialog-confirm" title="Drop course confirmation" style="display:none">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Course will be dropped. Are you sure?</p>
</div>

<script type="text/javascript">
var dropCourse = function(id){
	document.location = document.location.origin + "/dropcourse/"+id;
}

$.ajax({ url:"/getMyCourses/"+"@{session().get("user_id")}",
			type:"GET",
	          success: function( result ) {
	        	  for(var l=0,len=result.length;l<len;l++){
	        		  var course = result[l];
	        		  var tr = $('<tr style="cursor:pointer">');
	        		  tr.append($('<td>').html(l+1))
	        		  	.append($('<td>').html(course.name))
	        		  	.append($('<td>').html(course.instructor_name))
	        		  	.append($('<td>').html(course.institution_name))
	        		  	.append($('<td>').append($("<a>").attr('href',course.url).attr('target','_blank').html("Visit")))
	        		  	.append($('<td>').html(course.course_rate > 0 ? course.course_rate:"Not Voted Yet"))
	        		  	.append($('<a href="#" data-toggle="tooltip" title="" data-original-title="Delete Course From List"><button type="button" class="close" >&times;</button></a>')
	        		  			.click(function(courseid){
			        		  		return function(){
			        		  			$( "#dialog-confirm" ).dialog({
			        		  		      resizable: false,
			        		  		      height:200,
			        		  		      width:400,
			        		  		      modal: true,
			        		  		      buttons: {
			        		  		        "Drop course": function() {
			        		  		        	dropCourse(courseid);
			        		  		        },
			        		  		        Cancel: function() {
			        		  		          $( this ).dialog( "close" );
			        		  		        }
			        		  		      }
			        		  			
			        		  		   });
	        		  	}
			        }(course.course_id))).click(function(cid){
			        	return function(){
			        		document.location = document.location.origin +"/coursedetail/"+cid;
			        	}
			        }(course.course_id));
	        	  	$('.actual').append(tr);
	        	  }
	        	  
	          }
	    });
	    
	    
$.ajax({ url:"/getRecommendedCoursesForUser",
	type:"GET",
      success: function( result ) {
    	  for(var l=0,len=result.length;l<len;l++){
    		  var course = result[l];
    		  var tr = $('<tr style="cursor:pointer">');
    		  tr.append($('<td>').html(l+1))
    		  	.append($('<td>').html(course.name))
    		  	.append($('<td>').html(course.instructor_name))
    		  	.append($('<td>').html(course.institution_name))
    		  	.append($('<td>').append($("<a>").attr('href',course.url).attr('target','_blank').html("Visit")))
    		  	.append($('<td>').html(course.course_rate > 0 ? course.course_rate:"Not Voted Yet")).click(function(cid){
		        	return function(){
		        		document.location = document.location.origin +"/coursedetail/"+cid;
		        	}
		        }(course.course_id));
    		  	$('.recommended').append(tr);
    	  	}
    	  	
    	  }
});

</script>
}